<template>
  <div class="home">
    <img v-rotate alt="Vue logo" src="../assets/logo.png">

    <fieldset>
      <legend>v-rotate</legend>
      <div class="text-container">
        <span v-rotate>旋</span>
        <span v-rotate>转</span>
        <span v-rotate>跳</span>
        <span v-rotate>跃</span>
        <span v-rotate>我</span>
        <span v-rotate>闭</span>
        <span v-rotate>着</span>
        <span v-rotate>眼</span>
      </div>
    </fieldset>

    <fieldset>
      <legend>ad-button</legend>
      <ad-button size="small">小按钮</ad-button>
      <ad-button >默认按钮</ad-button>
      <ad-button size="middle" @click="da">大按钮</ad-button>
      <ad-button disabled>禁用按钮</ad-button>
    </fieldset>

    <fieldset>
      <legend>v-prevent-re-click</legend>
      <ad-button v-prevent-re-click>禁用3秒</ad-button>
      <ad-button v-prevent-re-click="1000">禁用1秒</ad-button>
    </fieldset>

    <fieldset>
      <legend>v-has</legend>
      <ad-button v-has="'add'">新增</ad-button>
      <ad-button v-has="'delete'">删除</ad-button>
      <ad-button v-has="'select'">查询</ad-button>
      <ad-button v-has="'edit'">编辑</ad-button>
    </fieldset>

  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  props: {
    nodeAuthList: {
      type: Array,
      default: () => ['add', 'edit'],
    }
  },
  methods: {
    da() {
      console.log('dddddd')
    }
  }
}
</script>

<style scoped>
  .text-container > span {
    font-size: 36px;
    letter-spacing: 4px;
  }
</style>
